<div class="index-bg">
  <!-- <login-dialog [(showdialog)]="showLogin" (loginSuccess)="loginSuccess()"></login-dialog> -->
  <div class="weui-flex index-top" *ngIf='isShowTop'>
    <div class="weui-flex__item">
      <div class="placeholder lf">
        <img style="height: 3.9375rem;margin-top: 1rem;" src="../../../assets/images/login-page/APO.png" />
        <!-- <input class="search-input" type="search" id="mySearch" placeholder="搜索.." routerLink="/search"> -->
        <div class="Search" routerLink="/search"><i
            class="weui-icon-search" style="float: right;
            color: #fff;"></i></div>
      </div>
    </div>
    <div class="weui-flex__item">
      <a style="line-height: 6rem;" *ngIf='!user' (click)="gologin()">{{'login' | translate}}</a>
      <div class="top-user" *ngIf='user'>
        <a  routerLink="/indexMy">
          <img style="
              padding-right: .2rem;
              width: 1.87rem;
              height: 1.8rem;
              margin-top: 1rem;" src='../../../../assets/icons/h2.png' /></a>
      </div>
    </div>
  </div>
  <div class="index-top-b" *ngIf='!isShowTop'>
    <img style="height: 3.9375rem;margin-top: 1rem; padding-left: 1.5625rem;" src="../../../assets/images/login-page/APO.png" />
    <div class="r">
      <div class="placeholder rf">
        <a *ngIf='user' routerLink="/search">
          <img style="
              padding-right: .2rem;
              width: 1.87rem;
              height: 1.8rem;
              margin-top: 1rem;" src='../../../../assets/icons/s-icon.png' /></a>
      </div>
   
      <a  style="background: none; line-height: 4rem;margin-right: 2.8rem;" *ngIf='!user' (click)="gologin()">{{'login' | translate}}</a>
      <div class="placeholder rf" *ngIf='user'>
        <a  routerLink="/indexMy">
          <img style="
              padding-right: .2rem;
              width: 1.87rem;
              height: 1.8rem;
              margin-top: 1rem;" src='../../../../assets/icons/h2.png' /></a>
      </div>
    </div>
  </div>

  <div >
    <div class="swiper-c" [ngClass]="'swiper'">
      <weui-swiper #swiper [options]="options" autoplay=true>
        <div class="swiper-container">
          <!-- 容器（必选） -->
          <div class="swiper-wrapper">
            <div class="swiper-slide" *ngFor="let i of imgs" routerLink="/agency" [queryParams]='{id:i.productId}'>
              <img style="width: 100%;height:98%" src="{{i.image}}" alt="">
            </div>
          </div>
          <!-- 分页（可选） -->
          <div class="swiper-pagination"></div>
        </div>
      </weui-swiper>
    </div>
  </div>

  <div class="game-body">

    <div class="game-play" *ngIf='plays.length > 1'>
      <h3>{{'home-page.html2' | translate}}</h3>
      <div class="game-plays">
        <div class="plays-img" *ngFor="let item of plays" (click)='onSel(item.productId)'>
          <img src="{{item.thumbnail}}" alt="">
          <p>{{item.productName | getstatus2 : lang}}</p>
        </div>
      </div>
    </div>

    <div class="game-list">
      <div class="top-title">
        <h1>{{'home-page.html3' | translate}}</h1>
        <div class="title-tab">
          <a href="javascript:;" *ngFor="let item of tabs" [ngStyle]="{'color':item.id == selTabId? '#ff9800' : '#333333' }" (click)='onClick(item)'>{{item.name | getstatus2 : lang }}</a>
        </div>
      </div>
      <div class="img-c" *ngFor="let item of list">
        <div class="game-c">
          <img src="{{item.thumbnail}}" alt="">
          <div class="game-text-c">
            <div class="game-text" routerLink="/agency" [queryParams]='{id:item.productId}'>
              <em>{{item.productName  | getstatus2 : lang}}</em>
              <p>{{item.briefInfo  | getstatus2 : lang}}</p>
              <weui-rating [(ngModel)]="item.levelStar" [config]="customIconsAndClassCog" [readonly]="true"></weui-rating>
            </div>
            <a (click)='onSel(item.productId)' class="pay-btn">{{'home-page.html6' | translate}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="fixed-box" *ngIf="dialogShow">
    <div class="pay-sure-box">
      <!-- <i class="icon-close" (click)="onOutsize(false)">╳</i> -->
      <h3>{{'MSG.chickout-msg' | translate}}</h3>
      <div style="display: flex;">
        <button class="btn-primary" (click)="chickOut()">{{'OK' | translate}}</button>
        <button class="btn-default" (click)="cancel()">{{'cancel' | translate}}</button>
      </div>
    </div>
  </div>
</div>